<template>
    <div class="mainLife">
        <p class="title">学习进度</p>

        <lifeC>

        <div class="review">
		  <span class="icon-container">Html</span>
		  <div class="progress">
		  <div class="progress-done"  style="width: 80%;"></div>
		   </div>
		   <span class="percent">80%</span>
	     </div>

         <div class="review">
		  <span class="icon-container">Css</span>
		  <div class="progress">
		  <div class="progress-done"  style="width: 75%;"></div>
		   </div>
		   <span class="percent">75%</span>
	     </div>

          <div class="review">
		  <span class="icon-container">JavaScript</span>
		  <div class="progress">
		  <div class="progress-done"  style="width:50%;"></div>
		   </div>
		   <span class="percent">50%</span>
	     </div>

         <div class="review">
		  <span class="icon-container">Vue</span>
		  <div class="progress">
		  <div class="progress-done"  style="width:60%;"></div>
		   </div>
		   <span class="percent">60%</span>
	     </div>

         <div class="review">
		  <span class="icon-container">php</span>
		  <div class="progress">
		  <div class="progress-done"  style="width:30%;"></div>
		   </div>
		   <span class="percent">30%</span>
	     </div>

         <div class="review">
		  <span class="icon-container">java</span>
		  <div class="progress">
		  <div class="progress-done"  style="width:10%;"></div>
		   </div>
		   <span class="percent">10%</span>
	     </div>

        </lifeC>

    </div>
</template>

<script>
import lifeC from './lifeContent'
export default {
    name:'mainLeft',
    components:{
        lifeC
    }
}
</script>

<style scoped>
.mainLife{
    width: 1000px;
    margin: 20px auto;
    background: #ffffff;
    padding: 10px;
    box-shadow: 5px 5px 2px #888888;
}
.mainLife .title{
    font-size: 26px;
    font-weight: bold;
}
</style>